<template>
    <div class="contenter dayReport1 dailySalesWarehouse">
        <div class="center fontSize16 mt20 mb20">
            <span class="fontSize14 colorOrange"> < {{parmInfo.brandName}} > </span>
            <span class="fontbold">
                {{parmInfo.activeNav==3?`${parmInfo.year}年`:''}}
                {{parmInfo.activeNav==2?`${parmInfo.year}-${parmInfo.month}`:''}}
                {{parmInfo.activeNav==1?`${parmInfo.day}`:''}}区域报表</span>
        </div>
        <!-- <div class="mb20" style="position: sticky;top: 0;z-index:9999999999">
            <van-dropdown-menu active-color="#4873c1">
                <van-dropdown-item v-model="typeVal" @change='getType' :options="option" ref="item">
                </van-dropdown-item>
            </van-dropdown-menu>
        </div> -->
        <!-- <div class="fontSize11 color999 mb10 center" v-if="typeVal==1">【总计】销售额：{{reportTotal.sale}}万</div> -->
        <!-- <div class="fontSize11 color999 mb10 center" v-if="typeVal==2">【总计】月累消费人数：  | 年累消费人数：</div> -->
         <div class="mainContent fontSize0" v-if="reportList.length>0">
            <div v-for="(item,index) in reportList" :key="index">
                <div class="title flex flexCenter alignCenter fontSize16 fontbold">{{item.name}}</div>
                 <!--销售额-->
                <div class="contentlayout wd100"  v-if="typeVal==1">
                    <!--销售表头-->
                    <div class="subTitle colorfff fontSize12 wd100 flex alignCenter flexCenter"  v-if="typeVal==1">
                        <div class="disInline w20">
                            <div class="flex flexCenter alignCenter">区域名称</div>
                        </div>
                        <div class="disInline w20">
                            <div class="flexCenter flex flexAround alignCenter" @click="goSort(item.sort,'num')">
                                <div class="center">销售额(万)</div> 
                            </div>
                        </div>
                        <div class="disInline w20">
                            <div class="flexCenter flex flexAround alignCenter" @click="goSort(item.sort,'pastSale')">
                                <div class="center">同期销售额(万)</div> 
                            </div>
                        </div>
                        <div class="disInline w20"  @click="goSort(item.sort,'ratio')">
                            <div class="flexCenter flex flexAround alignCenter">
                                <div class="center">同期提升比</div> 
                            </div>
                        </div>
                        <div class="disInline w20"  @click="goSort(item.sort,'shopNum')">
                            <div class="flexCenter flex flexAround alignCenter">
                                <div class="center">同店销售额(万)</div> 
                            </div>
                        </div>
                        <div class="disInline w20"  @click="goSort(item.sort,'shopPastSale')" v-if="parmInfo.activeNav>1">
                            <div class="flexCenter flex flexAround alignCenter">
                                <div class="center">同店同期销售额(万)</div> 
                            </div>
                        </div>
                        <div class="disInline w20" v-if="parmInfo.activeNav>1"  @click="goSort(item.sort,'shopRatio')">
                            <div class="flexCenter flex flexAround alignCenter">
                                <div class="center">同店同期提升比</div> 
                            </div>
                        </div>
                    </div>
                    <!--销售列表-->
                    <div class="reportListContent disInline fontSize13" v-if="typeVal==1">
                        <div v-for='(e,elindex) in item.sub' :key="elindex" class="flex flexBetween flexCenter" @click="goDetail(e,item.id)">
                            <div class="w20 borderGray regionName flex flexCenter alignCenter  center">{{e.name}}</div>
                            <div class="w20 borderGray flex flexCenter alignCenter">{{e.num}}</div>
                            <!-- <div class="w20 borderGray flex flexCenter alignCenter">
                                {{e.ratio}}
                            </div> -->
                            <div class="w20 borderGray flex flexCenter alignCenter">{{e.pastSale}}</div>
                            <div class="w20 borderGray flex flexCenter alignCenter">
                                <span :class="{'colorGreen':e.ratio<0,'colorRed':e.ratio>0}">{{e.ratio==''?e.ratio:`${e.ratio}%`}}</span>
                                <van-icon name="down" v-if="e.ratio!=0" :class="{'colorGreen':e.ratio<0,'colorRed rotate180':e.ratio>0}"/>
                            </div>
                            <div class="w20 borderGray flex flexCenter alignCenter">{{e.shopNum}}</div>
                            <!-- <div class="w20 borderGray flex flexCenter alignCenter"  v-if="parmInfo.activeNav>1">{{e.shopRatio}}</div> -->
                            <div class="w20 borderGray flex flexCenter alignCenter" v-if="parmInfo.activeNav>1">{{e.shopPastSale}}</div>
                            <div class="w20 borderGray flex flexCenter alignCenter" v-if="parmInfo.activeNav>1">
                                <span :class="{'colorGreen':e.shopRatio<0,'colorRed':e.shopRatio>0}"> 
                                    {{e.shopRatio?`${e.shopRatio}%`:''}}
                                </span>
                                <van-icon name="down" v-if="e.shopRatio" :class="{'colorGreen':e.shopRatio<0,'colorRed rotate180':e.shopRatio>0}"/>
                            </div>
                        </div>
                    </div>
                    <!--小计-->
                    <div class="flex flexBetween flexCenter colorBlue fontbold relative fontSize14" v-if="typeVal==1" style="display: -webkit-box;z-index:-1">
                        <div class="w20 borderGray regionName flex flexCenter alignCenter">{{item.subTotal.name}}</div>
                        <div class="w20 borderGray flex flexCenter alignCenter">{{item.subTotal.num}}</div>
                        <div class="w20 borderGray flex flexCenter alignCenter">{{item.subTotal.pastSale}}</div>
                        <div class="w20 borderGray flex flexCenter alignCenter">
                            <!-- {{item.subTotal.ratio}} -->
                            <span :class="{'colorGreen':item.subTotal.ratio<0,'colorRed':item.subTotal.ratio>0}">{{item.subTotal.ratio==''?item.subTotal.ratio:`${item.subTotal.ratio}%`}}</span>
                                <van-icon name="down" v-if="item.subTotal.ratio!=0" :class="{'colorGreen':item.subTotal.ratio<0,'colorRed rotate180':item.subTotal.ratio>0}"/>
                        </div>
                        <div class="w20 borderGray flex flexCenter alignCenter">{{item.subTotal.shopNum}}</div>
                        <div class="w20 borderGray flex flexCenter alignCenter" v-if="parmInfo.activeNav>1">{{item.subTotal.shopPastSale}}</div>
                        <div class="w20 borderGray flex flexCenter alignCenter"  v-if="parmInfo.activeNav>1">
                            <!-- {{item.subTotal.shopRatio}} -->
                            <span :class="{'colorGreen':item.subTotal.shopRatio<0,'colorRed':item.subTotal.shopRatio>0}"> 
                                {{item.subTotal.shopRatio?`${item.subTotal.shopRatio}%`:''}}
                            </span>
                            <van-icon name="down" v-if="item.subTotal.shopRatio" :class="{'colorGreen':item.subTotal.shopRatio<0,'colorRed rotate180':item.subTotal.shopRatio>0}"/>
                        </div>
                    </div>
                </div>
                 <!--vip-->
            </div>
         </div>
    </div>
</template>
<script>
import { Toast} from 'vant'
import {GetQueryStr} from '@/common/common.js'
export default{
    name:'areaReport',
    data(){
        return{
            brandVal:1,
            brandList:[],
            typeVal:1,
            option: [
                { text: '销售额', value: 1 },
                { text: 'vip', value: 2 },
            ],
            dateVal:'',
            dateList:[],
            nowDate:'',
            day:'',
            month:'',
            // reportList:{
            //     list:[],
            //     total:{}
            // },
            show:false,
            minDate: '',
            maxDate: '',
            brandId:'',
            brandName:'',
            isLoading:true,
            channelId:'',

            parmInfo:{},
            reportList:[],
            reportTotal:{},
        }
    },
    created(){
        let parm=this.$route.query
        console.log('区域页面parm',parm)
        this.parmInfo=parm
        this.getAreaList(1,'ratio')
    },
    methods:{
        getAreaList(type,name){
            let obj={
               year:this.parmInfo.year,
               month:this.parmInfo.month,
               day:this.parmInfo.day,
               brandId:this.parmInfo.brandId,
               channelId:this.parmInfo.channelId,
               sort:type,//1降序 2升
               sortField:name //排序字段：num 销售，ratio 同期比，shopNum 同店销售，shopRatio 同店同期
            }
            if(this.isLoading){
                Toast.loading({
                    message: '加载中',
                    forbidClick: true,
                    duration:0
                })
            }
            
            console.log('提交的参数',obj)
            this.$apiRequest.getAreaList(obj).then(res=>{
                console.log('区域列表',res)
                Toast.clear()
                if(res.code==200){
                    res.data.list.map(i=>{
                        i.sort= type==2?1:2
                        i.subTotal=i.sub.pop()
                    })
                    this.reportTotal=res.data.total
                    this.reportList=res.data.list
                }
            })
        },
        goDetail(e,areaId){
            console.log('区域',e)
            let obj={
                brandId:this.parmInfo.brandId,
                channelId:this.parmInfo.channelId,
                // channelId:info.channelId,
                areaId:e.id,
                year:this.parmInfo.year,
                month:this.parmInfo.month,
                day:this.parmInfo.day,
                brandName:this.parmInfo.brandName,
                activeNav:this.parmInfo.activeNav
            }
            this.$router.push({name:'storeReport',query:obj})
        },
        getType(e){
            this.typeVal=e
        },
        goSort(type,name){
            this.isLoading=false
            this.getAreaList(type,name)
        }
    }
}
</script>
<style >
.dayReport1 .van-overlay{
    background-color: rgba(0, 0, 0, 0.9)
}
.van-dropdown-menu__bar{
    background-color: #fff;
    z-index: 999;
}

.dailySalesWarehouse .van-dropdown-item{
    /* max-width: 7rem;
    position: fixed;
    left:50%;
    transform: translateX(-50%); */
}
/* .van-dropdown-item{
    max-width: 7rem;
    transform: translateX(-50%);
    left: 50%;
    width: 100%;
} */
</style>
<style lang='less' scoped>
.rotate180{transform: rotate(180deg);}
.dayReport1,.allTotal{
    max-width: 7rem;
}
ul li{
    width: 2rem;
    display:flex;
}
.contentlayout{
    display: block;
    white-space: nowrap;
    overflow-x: auto;
}
.w14{
    // width: 13%;
    width: 1.4rem;
    padding: 0.14rem 0;
    text-align: center;
    // height: 0.9rem;
    // line-height: 0.6rem;
    // border: 1px #777 solid;
}
.w20{
    width: 2.2rem;
    padding: 0.2rem 0.04rem;
}
.w24{
    width: 2.4rem;
    padding: 0.14rem 0;
    text-align: center;
}
.w28{
    width: 2.8rem;
}
.reportListContent{
    max-height:6rem;
    overflow-y: scroll;
    .regionName{
        background-color: #f1f1f1;
        white-space: pre-wrap;
    }
}
.contenter{
    width: 100%;
    margin: 0 auto;
    .title{
        background-color: rgba(83,114,192,0.1);
        padding: 0.1rem 0;
    }
    .mainContent{
        padding-bottom: 1.2rem;
    }
    .subTitle{
        // height: 1rem;
        display: block;
        background-color: #85aaee;
        width: fit-content;
        // padding: 0.1rem 0;
        .w14{
            height: 1rem;
            // line-height: 0.76rem;
        }
    }
    .Subtotal{
        background: #fdebe8;
        position: fixed;
        width: 92%;
        bottom: 0.48rem;
        left: 50%;
        z-index: 1;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
    }
}
.borderGray{
    // background-color: #85aaee;
    // padding: 0.1rem 0;
    border:1px #eee solid
}
.borderBlue{
    border:1px #83a6e7 solid
}
// .w33{
//     width: 25%;
//     padding: 0.24rem 0;
//     border:1px #eee solid;
//     background-color: #fff;
// }
// .listContent{
//     margin-bottom: 0.4rem;
//     position: sticky;
//     top: 0.86rem;
//     z-index: 99;
//     .w33:nth-child(3n){
//         border-right:none !important
//     }
// }
.dailySalesWarehouse{
    max-width: 7rem !important;
}
.arrowSolid{
    width: 0;
    height: 0;
    
}
.arrowUp{
    // border-bottom:0.2rem solid blue
    border-left: 0.12rem transparent solid;
    border-right:0.12rem transparent solid;
    border-top: 0.12rem transparent solid;
    border-bottom:0.12rem #f1f1f1 solid
}
.arrowDown{
    // border-bottom:0.2rem solid blue
    border-left: 0.12rem transparent solid;
    border-right:0.12rem transparent solid;
    border-top: 0.12rem #f1f1f1 solid;
    border-bottom:0.12rem transparent solid
}
.mb14{margin-bottom: 0.2rem;}
.fontSize0{font-size: 0;}

.mainTable{
    overflow:auto;
    height: 9rem;
    td,th{
        // border:1px solid gray;
        width:100px;
        height:40px;
        border:1px #eee solid;
        text-align: center;
    }
    th{
        position: relative;
        z-index: 999;
    }
    table{
        table-layout:fixed;
        width:900px;
    }
    td:first-child,th:first-child{
        position:sticky;
        left:0;
        z-index:1;
        // background-color:lightpink;
    }
    thead tr th{
        position:sticky;
        top:0;
    }
    td:first-child{
        background-color: #f1f1f1;
        z-index: 1;
    }
    th:first-child{
        z-index:999999;
        // background-color:lightblue;
    }
}
</style>
